<template>
  <div class="login-panel">
    <header class="mui-bar mui-bar-nav">
      <h1 class="mui-title" id="page-title">登录</h1>
    </header>
    <div id="login-panel" class="mui-input-group">
      <div class="mui-input-row">
        <label>账号</label>
        <input type="text" v-model="user_id" placeholder="请输入账号" />
      </div>
      <div class="mui-input-row">
        <label>密码</label>
        <input type="password" v-model="user_pwd" value="" class="mui-input-password" placeholder="请输入密码" />
      </div>
    </div>
    <div id="auto-logi-panel" class="mui-table-view-cell">
        <span>自动登录</span>
        <div id="btn-autologin" class="mui-switch mui-active" data-switch="1">
          <div class="mui-switch-handle"></div>
        </div>
    </div>
    <div class="btnlogin-panel">
      <button type="button" id="btnlogin" @click="login" class="mui-btn mui-btn-primary">登录</button>
    </div>
  </div>
</template>

<style>
#login-panel {
  margin-top: 80px;
}
#login-panel .mui-input-row label {
  width: 20%;
}
#login-panel .mui-input-row input {
  width: 80%;
}
.btnlogin-panel {
  width: 100%;
  text-align: center;
}
#btnlogin {
  margin-top: 20px;
  width: 80%;
  height: 42px;
}
#auto-logi-panel{
  margin-top: 26px;
  background: #ffffff;

}
</style>
<script>

import axios from 'axios';
import $ from 'jquery';
import Cookies from 'js-cookie';
import { Toast } from 'vant';
import { api } from '../assets/js/api';

export default {
  data() {
    return {
      user_id: '',
      user_pwd: '',
    };
  },
  methods: {
    login() {
      const loginData = {
        user_id: this.user_id,
        user_pwd: this.user_pwd,
      };
      
      axios({
        method: 'post',
        url: api.user.login,
        data: loginData,
      }).then((response) => {
        const res = response.data;
        if (res.code) {
          Toast(res.msg);
          localStorage.removeItem("Now_User");
          localStorage.setItem("Now_User", JSON.stringify(res.data));
          const remember_password = $('#btn-autologin').attr('class');
          if (remember_password == 'mui-switch mui-active') {
            localStorage.removeItem("Remember_Pssword");
            localStorage.setItem("Remember_Pssword",  JSON.stringify(loginData));
          } else {
            localStorage.removeItem("Remember_Pssword");
          }
          this.$router.push({path:"/"});
          return true;
        }
        Toast(res.msg);
      });
    },
  },
  created() {
    let loginData = localStorage.getItem("Remember_Pssword"); //Cookies.get('Remember_Pssword');
    if (loginData == null) return false;
    loginData = JSON.parse(loginData);
    this.user_id = loginData.user_id;
    this.user_pwd = loginData.user_pwd;
  },
};
$(() => {
  $('#btn-autologin').click(function () {
    $(this).toggleClass('mui-active');
  });
});

</script>
